<template>
    <div class="analyzecon">
        <table>
            <thead>
            <tr>
                <td>联赛</td>
                <td>推荐数</td>
                <td>命中率</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in machlists">
                <td>{{item.league}}</td>
                <td>推{{item.total}}种{{item.hitCounts}}</td>
                <td>{{item.hitRate | removeper}}<b>%</b></td>
            </tr>
            </tbody>

        </table>

    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {matchsAnalyzeR} from '../../service/matchs';
    import {dropLast} from 'ramda';
    export default {
        components: {
            myButton: Button,
            DomLoad
        },
        data() {
            return {
                id: 0,
                machlists: []
            };
        },
        filters: {
            removeper(val){
                return dropLast(1, val);
            }
        },
        created() {
            this.id = this.$route.params.id;
            this.getdata(this.id);
        },
        computed: {},
        methods: {
            async getdata(id){
                const {data} =await matchsAnalyzeR(id);
                if(data && data.code === 0) {
                    this.machlists = data.data.leagues;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .analyzecon {
        display: flex;
        table {
            table-layout: fixed;
            td {
                padding: 20px;
                text-align: center;
            }
            width: 100%;
            thead {
                background: transparent;
                tr {
                    td {
                        height: 70px;
                        padding: 0;
                    }
                }
            }
            tbody {
                background: #fff;
                tr {
                    td {
                        b {
                            font-size: @fz24;
                        }
                        font-size: @fz30;
                        &:last-child {
                            color: @color22;
                            font-size: @fz40;
                            font-weight: bolder;
                        }
                    }
                }
            }
        }
    }

</style>